<script setup>
import {ElContainer, ElDialog, ElMain, ElMessageBox} from 'element-plus';
import Head from '../components/head.vue'
import asider from '../components/aside.vue'
import {onMounted, ref} from 'vue'
import axios from "axios";
import router from "../router";
const input = ref('')
const tableData = ref([])
//存储初次加载的所有数据
const initialData=ref([])
//页面加载时查询所有信息
onMounted(async ()=>{
  //判断是否有人登录
  let data=sessionStorage.getItem('manager');
  if(data==null){//未登录就通过路径跳转直接送回登录页面
    alert("不买票就想上车？不登录你就想搞事？");
    router.push('/')
  }else{
    const response = await axios.get('/shop/').then(result=>{
      if(result.data.message=="查询成功"){
        tableData.value = result.data.data
        initialData.value=result.data.data
      }else {
        alert(result.data.message);
      }
    }).catch(error=>{
      alert('请求出现问题，请稍后再试'+error);
    })
  }
})
//输入框查询
const Query = async ()=>{
  //axios方法与后端一致，@Requestparam的参数使用“params:{}”传递
  const response = await axios.get('/shop/select',{params:{name:input.value}})
      .then(result=>{
        if(!input.value){
          alert("请输入查询内容");
          return;
        }
        if(result.data.message=="查询成功"){
          tableData.value = result.data.data
        }else {
          alert(result.data.message);
        }
      }).catch(error=>{
        alert('请求出现问题，请稍后再试'+error);
      })
}
//接收多选框选中的数据
const selectedRows = ref([]);
//保存选中的数据
const handleSelection = (val) => {
  selectedRows.value = val;
};
//删除所选内容
const Delete = async ()=> {
  try{
    if (selectedRows.value.length == 0) {
      alert("请选择要删除的账号");
      return;
    }
    //弹消息框确认删除
    const confirm = await ElMessageBox.confirm('确认删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true
    }).then(async () => {
      //提取需要的数据
      const idlist = selectedRows.value.map((row) => row.id)
      //axios方法与后端一致,非get方法后端使用@Requestbody接收数据
      const response = await axios({url: '/shop/delete', method: 'delete', data: idlist})
          .then(result => {
            if (result.data.message.includes("删除成功")) {
              alert(result.data.message);
            } else {
              alert(result.data.message);
            }
          }).catch(error => {
            alert('请求出现问题，请稍后再试' + error);
          })
    })
  }catch (error) {
    alert(error);
  }
}
//添加弹出框显示的内容
const addVisible = ref(false);
//存储正在编辑的名字的响应式数据
const editingName = ref(null);
//存储正在编辑的位置的响应式数据
const editingLocation = ref(null);
//存储正在编辑的活动信息的响应式数据
const editingMessage = ref(null);
//存储当前正在编辑的行，方便后续更新操作定位到具体行
const currentRow = ref({});
//添加信息
const Add=async ()=>{
  addVisible.value = true;
}
const Upload=async ()=>{
  try{
    //axios方法与后端一致,非get方法后端使用@Requestbody接收数据
    const response = await axios({url:'/shop/upload', method:'post'
      ,data:{name:editingName.value,location:editingLocation.value,message:editingMessage.value}})
        .then(result=>{
          if(result.data.message.includes("添加成功")){
            alert(result.data.message);
          }else {
            alert(result.data.message);
          }
        })
  }catch(error){
    alert('请求出现问题，请稍后再试'+error);
  }finally {
    Close();
  }
}
//弹出框显示隐藏的名称
const nameVisible = ref(false);
//弹出框显示隐藏的位置
const locationVisible = ref(false);
//弹出框显示隐藏的活动信息
const messageVisible = ref(false);
//处理修改框关闭前的事件
const Close = () => {
  addVisible.value = false;
  nameVisible.value = false;
  locationVisible.value = false;
  messageVisible.value = false;
  editingName.value = null;
  editingLocation.value = null;
  editingMessage.value = null;
  currentRow.value = null;
};
//点击表格列文本内容弹出修改框
const Editname = (event, row) => {
  nameVisible.value = true;
  editingName.value = row.name; //设置编辑框初始值
  currentRow.value = row;
};
const Editlocation = (event, row) => {
  locationVisible.value = true;
  editingLocation.value = row.location; //设置编辑框初始值
  currentRow.value = row;
};
const Editmessage = (event, row) => {
  messageVisible.value = true;
  editingMessage.value = row.message; //设置编辑框初始值
  currentRow.value = row;
};
//保存修改内容
const Update=async ()=>{
  try{
    //修改名字
    if(editingName.value){
      //axios方法与后端一致,非get方法后端使用@Requestbody接收数据
      const response = await axios({url:'/shop/update', method:'put',
        data:{id:currentRow.value.id,name:editingName.value,location:editingLocation.value,message:editingMessage.value}})
          .then(result=> {
            if (result.data.message.includes("修改成功")) {
              alert(result.data.message);
            }else {
              alert(result.data.message);
            }
          }).catch(error => {
            alert('请求出现问题，请稍后再试' + error);
          })
    }else if(editingLocation.value){
      //修改位置
      const response=await axios({url:'/shop/update',method:'put',
        data:{id:currentRow.value.id,name:editingName.value,location:editingLocation.value,message:editingMessage.value}})
          .then(result=>{
            if(result.data.message.includes("修改成功")){
              alert(result.data.message);
            }else {
              alert(result.data.message);
            }
          }).catch(error => {
            alert('请求出现问题，请稍后再试' + error);
          })
    }else{
      //修改活动信息
      const response=await axios({url:'/shop/update',method:'put',
        data:{id:currentRow.value.id,name:editingName.value,location:editingLocation.value,message:editingMessage.value}})
          .then(result=>{
            if(result.data.message.includes("修改成功")){
              alert(result.data.message);
            }else {
              alert(result.data.message);
            }
          }).catch(error => {
            alert('请求出现问题，请稍后再试' + error);
          })
    }
  }finally {
    Close();
  }
}
//输入框为空时，恢复初始数据
const inputChange = () => {
  if (!input.value){
    tableData.value = initialData.value;
  }
};
</script>
<template>
  <div class="common-layout" style="text-align: center;">
    <Head></Head>
    <el-container style="height: 80vh">
      <asider></asider>
      <el-main >
        <el-button type="primary" style="float: left" @click="Add">添加</el-button>
        <el-button type="danger" style="float: left" @click="Delete">删除</el-button>
        <el-dialog v-model="addVisible" title="新增" :before-close="Close" draggable>
          <el-form-item label="商户">
            <el-input  v-model="editingName" autosize type="textarea" placeholder="请输入要添加的内容" />
          </el-form-item>
          <el-form-item label="位置">
            <el-input v-model="editingLocation" autosize type="textarea" placeholder="请输入要添加的内容" />
          </el-form-item>
          <el-form-item label="活动信息">
            <el-input v-model="editingMessage" autosize type="textarea" placeholder="请输入要添加的内容" />
          </el-form-item>
          <template #footer >
        <span class="dialog-footer">
          <el-button @click="Close">取消</el-button>
          <el-button type="primary" @click="Upload">添加</el-button>
        </span>
          </template>
        </el-dialog>
        <el-form @keydown.enter="Query" @submit.prevent>
          <el-button type="primary" style="float: right" @click="Query">查询</el-button>
          <el-input v-model="input" style="width: 240px;float: right"
                    placeholder="输入关键字进行查询" clearable @input="inputChange"/>
        </el-form>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelection">
          <!--多选框-->
          <el-table-column type="selection" width="60" prop="id"/>
          <el-table-column label="商户" prop="name" width="200" header-align="center" align="center">
            <template v-slot="scope">
              <span @click="Editname($event, scope.row)">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="location" label="位置" width="390" header-align="center" align="center">
            <template v-slot="scope">
              <span @click="Editlocation($event, scope.row)">{{ scope.row.location }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="message" label="活动信息" width="553" header-align="center" align="center" show-overflow-tooltip>
            <template v-slot="scope">
              <span @click="Editmessage($event, scope.row)">{{ scope.row.message }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 使用ElDialog组件实现弹出框修改名字 -->
        <el-dialog v-model="nameVisible" title="编辑名称" :before-close="Close" draggable>
          <el-input v-model="editingName" autosize type="textarea" placeholder="请输入修改后的内容" />
          <template #footer >
        <span class="dialog-footer">
          <el-button @click="Close">取消</el-button>
          <el-button type="primary" @click="Update">修改</el-button>
        </span>
          </template>
        </el-dialog>
        <!-- 使用ElDialog组件实现弹出框修改位置 -->
        <el-dialog v-model="locationVisible" title="编辑简介" :before-close="Close" draggable>
          <el-input v-model="editingLocation" autosize type="textarea" placeholder="请输入修改后的内容" />
          <template #footer >
        <span class="dialog-footer">
          <el-button @click="Close">取消</el-button>
          <el-button type="primary" @click="Update">修改</el-button>
        </span>
          </template>
        </el-dialog>
        <!-- 使用ElDialog组件实现弹出框修改活动信息 -->
        <el-dialog v-model="messageVisible" title="编辑简介" :before-close="Close" draggable>
          <el-input v-model="editingMessage" autosize type="textarea" placeholder="请输入修改后的内容" />
          <template #footer >
        <span class="dialog-footer">
          <el-button @click="Close">取消</el-button>
          <el-button type="primary" @click="Update">修改</el-button>
        </span>
          </template>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<style>

</style>
